<template>
  <div class="modal"  tabindex="-1" role="dialog" aria-hidden="true" :id="id">
    <div class="modal-dialog  modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">
            <slot name="title">价格修改</slot>
          </h4>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body" v-if="priceInfo !== null">
          <form>
            <div class="row">
              <div class="col">
                <label>票面价</label>
                <input
                  type="text"
                  class="form-control"
                  v-model.lazy.number="priceInfo.price"
                />
                <span class="text-muted small">不参与计算</span>
              </div>
              <div class="col">
                <label for="">销售价</label>
                <input
                  type="text"
                  class="form-control"
                  v-model.lazy.number="priceInfo.parValue"
                />
                <span class="text-muted small">航司的实际卖价</span>
              </div>
              <div class="col">
                <label for="">税</label>
                <input
                  type="text"
                  class="form-control"
                  v-model.lazy.number="priceInfo.tax"
                />
                <span class="text-muted small">总的税金</span>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <label for="">保险费</label>
                <input
                  type="text"
                  class="form-control"
                  v-model.lazy.number="priceInfo.insurance"
                />
                <span class="text-muted small">保险费(0利润)</span>
              </div>
              <div class="col">
                <label for="">服务费</label>
                <input
                  type="text"
                  class="form-control"
                  v-model.lazy.number="priceInfo.serviceCharge"
                />
                <span class="text-muted small">服务费/人</span>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <label for="">航司代理费</label>
                <input
                  type="text"
                  class="form-control"
                  v-model.lazy.number="priceInfo.commission"
                />
                <span class="text-muted small">航司代理费，包含在销售价中</span>
              </div>
              <div class="col">
                <label for="">自定代理费</label>
                <input
                  type="text"
                  class="form-control"
                  v-model.lazy.number="priceInfo.commission2"
                />
                <span class="text-muted small">自定代理费，包含在销售价中</span>
              </div>
              <div class="col">
                <label for="">客户让利</label>
                <input
                  type="text"
                  class="form-control"
                  v-model.lazy.number="priceInfo.discount"
                />
                <span class="text-muted small">正数表示优惠，负数表示加价</span>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <label for="">应收/人</label>
                <input
                  type="text"
                  class="form-control-plaintext"
                  v-model.lazy.number="priceInfo.amount"
                />
                <span class="text-muted small">实际应付金额</span>
              </div>
              <div class="col">
                <label for="">成本/人</label>
                <input
                  type="text"
                  class="form-control-plaintext"
                  v-model.lazy.number="priceInfo.cost"
                />
                <span class="text-muted small">实际成本</span>
              </div>
            </div>
          </form>
        </div>
        <table class="table" v-if="priceInfo !== null">
          <thead>
            <tr>
              <td>人数</td>
              <td>客户应付</td>
              <td>底价</td>
              <td>利润</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{ priceInfo.ticketCount }}</td>
              <td>{{ priceInfo.totalAmount }}</td>
              <td>{{ priceInfo.totalCost }}</td>
              <td>{{ priceInfo.profit }}</td>
            </tr>
          </tbody>
        </table>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-secondary me-2"
            data-bs-dismiss="modal"
          >
            关闭
          </button>
          <button
            type="button"
            class="btn btn-primary"
            @click.stop="ok(priceInfo)"
          >
            确定
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import PriceInfo from "@/common/PriceInfo.js";

export default {
  props: {
    id: {
      type: String,
      default: "updateFlightPriceModal"
    }
  },
  data() {
    return {
      resolve: "",
      reject: "",
      promise: "", // 保存promise对象

      myModal: null,

      psgTypeName: "",

      priceInfo: new PriceInfo(),
    };
  },
  computed: {
    price() {
      return this.priceInfo.price;
    },
    parValue() {
      return this.priceInfo.parValue;
    },
    tax() {
      return this.priceInfo.tax;
    },
    insurace() {
      return this.priceInfo.insurance;
    },
    serviceCharge() {
      return this.priceInfo.serviceCharge;
    },
    commission() {
      return this.priceInfo.commission;
    },
    commission2() {
      return this.priceInfo.commission2;
    },
    discount() {
      return this.priceInfo.discount;
    },
  },
  watch: {
    price: function (newValue) {
      console.log(newValue);
    },
    parValue: function (newValue) {
      this.priceInfo.calc();
    },
    tax: function (newValue) {
      this.priceInfo.calc();
    },
    insurace: function (newValue) {
      this.priceInfo.calc();
    },
    serviceCharge: function (newValue) {
      this.priceInfo.calc();
    },
    commission: function (newValue) {
      this.priceInfo.calc();
    },
    commission2: function (newValue) {
      this.priceInfo.calc();
    },
    discount: function (newValue) {
      this.priceInfo.calc();
    },
  },
  methods: {
    ok: function (priceInfo) {
      this.hideModal();

      this.resolve(priceInfo);
    },
    modal: function (priceInfo) {
      this.showModal();

      this.priceInfo = priceInfo;

      this.promise = new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
      return this.promise; // 返回promise对象,给父级组件调用
    },
    showModal: function () {
      this.getMyModal().show();
    },
    hideModal: function () {
      this.getMyModal().hide();
    },
    getMyModal: function () {
      if (this.myModal === null) {
        let myModalEl = $(this.$el).get(0);
        this.myModal = new bootstrap.Modal(myModalEl);
      }

      return this.myModal;
    },
  },
};
</script>
